<template>
  <view class="box">
    <!-- 没有商品 -->
    <view class="empty" v-if="!total">
      <image src="/static/cart_empty@2x.png" class="empty-img"></image>
      <text class="tip-text">空空如也~</text>
    </view>
    <!-- 有商品 -->
    <view class="cart-list" v-else>
      <!-- 收货地址 -->
      <Address></Address>
      <view class="cart-title">
        <uni-icons type="shop" size="18"></uni-icons>
        <text class="cart-text">购物车</text>
      </view>
      <!-- 商品项 -->
      <uni-swipe-action ref="scroll">
        <uni-swipe-action-item :right-options="options" :show="isOpened" @click="deleteGood(good)" v-for="good in cart"
          :key="good.goods_id">
          <view class="goods-item">
            <radio :checked="good.goods_state" color="#C00000" @click="radioChange(good)"></radio>
            <view class="item-img" @click="goToDetail(good)">
              <image :src="good.goods_small_logo || defaultPic" mode="heightFix"></image>
            </view>
            <view class="item-info" @click="goToDetail(good)">
              <view class="goods-name">{{good.goods_name}}</view>
              <view class="goods-price">
                ￥{{good.goods_price | toFixed}}
                <uni-number-box :min="1" :value="good.goods_count" @click.native.stop="stopGo" @change="numChange($event, good)"></uni-number-box>
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <!-- 结算区域 -->
      <Settle></Settle>
    </view>
  </view>
</template>

<script>
  import badegMix from '@/mixins/tabbar-badge.js'
  import { mapState, mapMutations} from 'vuex'
  export default {
    mixins: [badegMix],
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }],
        isOpened: 'none'
      };
    },
    methods: {
      ...mapMutations("cartAbout", ['CHANGESTATE', 'CHANGECOUNT', 'DELETEGOOD']),
      // 修改勾选状态
      radioChange(good) {
        this.CHANGESTATE(good)
      },
      // 修改商品数量
      numChange($event, good) {
        good.goods_count = $event
        this.CHANGECOUNT(good)
      },
      // 删除购物车商品
      deleteGood(good) {
        var _this = this
        uni.showModal({
          content: "确定将这个宝贝删除？",
          cancelText: "我在想想",
          cancelColor: "#8e8e8e",
          success(res) {
            if (res.confirm) {
              _this.DELETEGOOD(good)
              _this.setBadge()
            } 
          }
        })
      },
      // 跳转到商品详细页面
      goToDetail(good) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?goods_id=" + good.goods_id
        })
      },
      stopGo() {}
    },
    computed: {
      ...mapState('cartAbout', ['cart'])
    },
    filters: {
      toFixed(num) {
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
  .box {
    padding-bottom: 50px;
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 150px;
      .empty-img {
        width: 90px;
        height: 90px;
      }
      .tip-text {
        font-size: 12px;
        color: gray;
        margin-top: 15px;
      }
    }
  }
  .cart-list {
    .cart-title {
      height: 40px;
      line-height: 40px;
      align-items: center;
      font-size: 14px;
      padding-left: 5px;
      border-bottom: 1px solid #efefef;

      .cart-text {
        margin-left: 5px;
      }
    }

    .goods-item {
      display: flex;
      padding: 10px 5px;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;

      .item-img {
        width: 100px;
        height: 100px;
        margin-left: 2px;
        margin-right: 10px;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }

      .item-info {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goods-name {
          font-size: 13px;
        }

        .goods-price {
          font-size: 16px;
          color: #C00000;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;

          uni-number-box {
            display: inline-block;
            position: absolute;
            right: 10px;
            line-height: 21px;

            .uni-numbox__value {
              margin: 0;
              background-color: #fff !important;
              border-top: 1px solid #f5f5f5;
              border-bottom: 1px solid #f5f5f5;
            }
          }
        }
      }
    }
  }
</style>
